<template>
  <div>
    <div @click="back">
      <van-nav-bar left-text="返回" left-arrow @click-left="back" title="首页" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt />
      </van-swipe-item>
    </van-swipe>
    <button class="fngot" @click="dijia">资深律师在线发牌,点击查看</button>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in list" :key="item.id">
        <div class="fav">
          <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt />
          <span>{{item.name}}</span>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import mixin from '@/mixin/flag'
import { Allfv, swiper } from '@/service/falv'
export default {
  mixins: [mixin],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      images: [],
    }
  },
  async created() {
    const res = await Allfv()
    this.list = res.data.rows
    const arr = await swiper()
    this.images = arr.data.data
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true
      }
    },
    dijia() {
      this.$router.push('./peopleView')
    },
    back() {
      this.$router.push('/')
    },
  },
}
</script>

<style lang="scss" scoped>
.fav {
  width: 100%;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid grey;
  img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
  }
  span {
    font-size: 17px;
    color: red;
    margin-left: 10px;
  }
}
.fngot {
  width: 100%;
  height: 40px;
  font-size: 16px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 250px;
}
img {
  width: 100%;
  height: 100%;
}
</style>